<template>
	<layout safeArea :navObj="navObj" :navbackgroundColor="navbgc">
		<view slot="medi" class="mediDom">
			<form @submit="formSubmit" @reset="formReset" class="form">
				<view class="uni-form-item">
					<span>前区范围:</span>
					<input class="uni-input" name="input1" placeholder="比如1~35" placeholder-style="color:#999"
						type="number" />
				</view>
				<view class="uni-form-item">
					<span>前区位数:</span>
					<input class="uni-input" name="input2" placeholder="比如5" placeholder-style="color:#999"
						type="number" />
				</view>
				<view class="uni-form-item">
					<span>后区范围:</span>
					<input class="uni-input" name="input3" placeholder="比如1~12" placeholder-style="color:#999"
						type="number" />
				</view>
				<view class="uni-form-item">
					<span>后区位数:</span>
					<input class="uni-input" name="input4" placeholder="比如2" placeholder-style="color:#999"
						type="number" />
				</view>
				<view class="uni-btn-v">
					<button form-type="submit" class="btn btn-grad">点击生成</button>
					<button type="default" form-type="btn reset">Reset</button>
				</view>
				<view class="uni-btn-v">
					<button @click="dltClick" class="btn btn-dlt">大乐</button>
					<button @click="scqClick" class="btn btn-ssq">双色</button>
					<button @click="handleStatistics" class="btn btn-ssq">统计测算</button>
				</view>
			</form>
			<view class="gplistDiv" v-if="statistics.length">
				<span class="numItem" v-for="(it,ik) in statistics" :key="ik"
					:class="{'hqBack':hqNum ? (statistics.length - ik <= hqNum ? true : false) :false} ">
					{{ numtoStr(it) }}</span>
			</view>
			<view class="random-number">
				<!-- <view v-if="topList.length"> {{ topList.join(',') }} </view>
				<view v-if="latterList.length" style="color: aqua;"> {{ latterList.join(',') }} </view> -->
				<view v-for="(item,index) in randNumStrsList" :key="index" class="numItemDiv">
					<span class="numItem" v-for="(it,ik) in item" :key="ik" :class="{
						'hqBack':hqNum ? (item.length - ik <= hqNum ? true : false) :false
						} ">{{ numtoStr(it) }}</span>
				</view>
			</view>
		</view>
		<view slot="bottom"></view>
	</layout>
</template>

<script>
	export default {
		data() {
			return {
				navObj: {
					title: '随机号码'
				},
				navbgc: 'linear-gradient(to right, #6739b6, #5a4e59)',
				topList: [],
				latterList: [],
				/** 随机号码字符串数组 */
				randNumStrsList: [],
				/** 当前随机规则 表单1 ， 大乐透 2  双色球 3 */
				randomGz: 1,
				/** 后区的位数  用于改变数字颜色 */
				hqNum: 0,
				/** 统计之后的高频数组 */
				statistics: [],
			};
		},
		methods: {
			randomNumberClick() {
				this.topList = this.getRanddomNumber(35, 5);
				this.latterList = this.getRanddomNumber(12, 2);
			},
			/**
			 * 随机生成数字
			 * @param {Number} dataRange 取值范围
			 * @param {Number} num 取几个数
			 */
			getRanddomNumber(dataRange, num) {
				const numbers = Array.from({
						length: dataRange
					},
					(_v, k) => k + 1
				);
				const result = [];
				for (let i = 0; i < num; i++) {
					const index = Math.floor(Math.random() * numbers.length);
					result.push(numbers.splice(index, 1)[0]);
				}
				result.sort((a, b) => a - b);
				return result;
			},
			formSubmit(e) {
				const formdata = e.detail.value
				// 判断对象 中 只要有一项是空就提示
				if (Object.values(formdata).some(item => !item)) {
					uni.showToast({
						title: '请输入完整信息',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '正在生成',
					mask: true
				})
				setTimeout(() => {
					// formdata 转数组
					this.tongyonggz(1, [arr[0], arr[1]], [arr[2], arr[3]])
					uni.hideLoading();
				}, 100);
			},
			formReset(_e) {
				console.log('清空数据')
				this.randNumStrsList = []
			},
			/** 大乐透按钮 */
			dltClick() {
				this.tongyonggz(2, [35, 5], [12, 2])
			},
			/** 双色球按钮 */
			scqClick() {
				this.tongyonggz(3, [33, 6], [16, 1])
			},
			tongyonggz(type = 1, arr1 = [], arr2 = []) {
				if (!arr1.length || !arr2.length) return;
				if (this.randomGz !== type) this.randNumStrsList = [];
				this.randomGz = type;
				this.topList = this.getRanddomNumber(arr1[0], arr1[1]);
				this.latterList = this.getRanddomNumber(arr2[0], arr2[1]);
				this.hqNum = arr2[1];
				const strs = [...this.topList, ...this.latterList]
				this.randNumStrsList.push(strs)
			},
			numtoStr(num) {
				if (num < 10) {
					return `0${num}`
				} else {
					return `${num}`
				}
			},
			handleStatistics() {
				if (this.randNumStrsList.length < 10) {
					this.common.fun_hint('请至少生成10组数据');
					return
				}
				const strs = this.common.simpleFindHighFrequency(this.randNumStrsList, 2)
				console.log(strs, '高频数组');
				this.statistics = strs;
			}
		},
	}
</script>

<style lang="less" scoped>
	.mediDom {
		padding: 12px;
	}

	.form {
		// padding: 12px 15px;

		.uni-form-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 94%;
			margin: 7px auto;

			input {
				border: 1px solid #dbdbdb;
				width: calc(100% - 4.5rem);
				border-radius: 6px;
				padding: 8px;
				height: 34px;
			}

			input::placeholder {
				color: #6f6f6f;
			}
		}
	}

	.uni-btn-v {
		text-align: center;
		// margin: 15px 0px;
		display: flex;
		align-items: center;
		justify-content: center;

		button {
			padding: 12px 15px;
			font-size: 16px;
			display: inline-block;
		}

		button+button {
			margin-left: 15px;
		}
	}

	.random-number {
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		color: #00c4ff;
		padding: 15px;
		font-size: 36px;
		background: #000;
		font-family: cursive;
		border-radius: 10px;
	}

	.btn {
		background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
		margin: 10px;
		padding: 8px 45px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;
		box-shadow: 0 0 20px #eee;
		border-radius: 10px;
		display: block;
		border: none;
	}

	.btn-grad {
		background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
	}

	.btn-dlt {
		background-image: linear-gradient(to right, #2BC0E4 0%, #EAECC6 51%, #2BC0E4 100%);
	}

	.btn-ssq {
		background-image: linear-gradient(to right, #614385 0%, #516395 51%, #614385 100%);
	}

	.btn-grad:hover {
		background-position: right center;
		/* change the direction of the change here */
		color: #fff;
		text-decoration: none;
	}

	.numItemDiv {
		display: flex;
		gap: 4px;
	}

	.numItemDiv+.numItemDiv {
		margin-top: 15px;
	}


	.numItem {
		font-size: 14px;
		padding: 6px;
		background: #b80003;
		color: #fff;
		border-radius: 50%;
	}

	.numItem+.numItem {
		margin-left: 6px;
	}

	.hqBack {
		background: #2187d8;
	}

	// 高频数组的样式
	.gplistDiv {
		padding: 15px;
		margin-bottom: 10PX;
		background: #462421;
		border-radius: 10px;
	}
</style>